<script>
// @ts-nocheck
    import { createEventDispatcher } from "svelte";
    import { Popover } from "flowbite-svelte";

    const dispatch  = createEventDispatcher()

    export let data = {}

    const onChanage = ()=>{
        dispatch('onChanage',data)
    }
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="flex items-center cursor-pointer" id={`itemperk${data.item_hash}`} on:click={onChanage}>
    <div class="relative">
        {#if data.tierType == 2 || data.tierType == 6}
            <!-- svelte-ignore a11y-missing-attribute -->
            <img class="w-16" src="/images/perk/perk.png">
        {/if}
        {#if data.tierType == 3}
            <!-- svelte-ignore a11y-missing-attribute -->
            <img class="w-16" src="/images/perk/gold_perk.png">
        {/if}
        <div class="flex absolute top-0 left-0 right-0 bottom-0  flex justify-center items-center">
            <!-- svelte-ignore a11y-missing-attribute -->
            <img class="w-10" src={data.icon}>
        </div>
    </div>
    <div class="hidden md:block">
        <div>{data.name}</div>
        <div>{data.type}</div>
        <!-- <div>{item.desc}</div> -->
    </div>
</div>

<div class=" relative z-10">
    <Popover class="w-64 text-sm font-light " title={data.name} triggeredBy={`#itemperk${data.item_hash}`} trigger="click">
        <div class=" mb-1">Hash:{data.item_hash}</div>
        <div class=" mb-1">{data.type}</div>
        {#if data.level}
            <div class="mb-1 text-red-600">锻造等级：{data.level}</div>
         {/if}
        <div>{data.desc}</div>
    </Popover>
</div>